class details{
    constructor(){
      
       
        this.getData();


    }
    // 获取渲染数据
   getData(){
        // let id = localStorage.getItem('id');   //取商品的id
        // console.log(id);
        // 发送请求
        let data = axios.get('http://localhost:8888/goods/item',{id:localStorage.getItem('id')}).then(res=>{
            // console.log(id);  
            let str = JSON.parse(res).info  //将json字符串转换为json对象 
            console.log(str);
            let xuan = this.$('.page_box')   //获取要渲染的节点
            console.log(xuan);
            
           let html = `<div class="plus5_no3">
            <div class="plus5_no3_img">
                <img src="${str.img_big_logo}" style="display: block" alt="">
                <img src="${str.img_big_logo}" style="display: none" alt="">
                <img src="${str.img_big_logo}" style="display: none" alt="">
                <img src="${str.img_big_logo}" style="display: none" alt="">
            </div>
            <div class="plus5_no3_right">
                <h1>${str.title}</h1>
                <p class="plus5_no3_right_p2"><span class="plus5_no3_right_span2">${str.sometitle}</p>
                <p class="plus5_no3_right_p3">${str.current_price}<span class="plus5_no3_right_span3">${str.price}</span></p>
                <div class="plus5_no3_right_div4">
                    <div class="plus5_no3_right_div4_in">
                        <p class="plus5_no3_right_p4">赠品</p><span>原装贴膜</span>
                    </div>
                    <div class="plus5_no3_right_div4_in">
                        <p class="plus5_no3_right_p4">赠品</p><span>原装贴膜</span>
                    </div>
    
    
                </div>
                <div class="plus5_no3_right_div5">
                        <p >北京 北京市 东城区 永定门外街道 <span class="plus5_no3_right_div5_span"><a class="plus5_no3_right_div5_span" href="">修改</a><br>有现货</span></p>
                </div>
                <div class="plus5_no3_right_div6">选择版本</div>
                <div class="plus5_no3_right_div7">
                    <li class="plus5_no3_right_div7_in plus5_no3_right_div7_in_hover">
                        <span class="plus5_no3_right_div7_span0 ">3GB+32GB</span>
                        <span class="plus5_no3_right_div7_span " >${str.price}/span>
                    </li>
                    <li class="plus5_no3_right_div7_in plus5_no3_float">
                        <span class="plus5_no3_right_div7_span0 ">4GB+64GB</span>
                        <span class="plus5_no3_right_div7_span " >1299元</span>
                    </li>
                </div>
                <div class="plus5_no3_right_div6">选择颜色</div>
                <div class="plus5_no3_right_div9">
                    <li class="plus5_no3_right_div7_in plus5_no3_right_div7_in_hover "><img src="img/plus5_phone_01.png" alt=""><span>金色</span></li>
                    <li class="plus5_no3_right_div7_in plus5_no3_float"><img src="img/plus5_phone_02.png" alt=""><span>黑色</span></li>
                    <li class="plus5_no3_right_div7_in"><img src="img/plus5_phone_03.png" alt=""><span>玫瑰金</span></li>
                    <li class="plus5_no3_right_div7_in plus5_no3_float"><img src="img/plus5_phone_04.png" alt=""><span>浅蓝色</span></li>
                </div>
                <div class="plus5_no3_right_div10">
                    <p class="plus5_no3_right_div10_p1">红米5 Plus <span class="plus5_no3_right_div10_span0">4GB+64GB</span> <span class="plus5_no3_right_div10_span1"></span><span class="plus5_no3_right_div10_span2">金色</span></p><span class="plus5_no3_right_span10">999元</span>
                    <p class="plus5_no3_right_div10_p2">总计 ：${str.price}</p>
    
                </div>
              <div class="plus5_car">
                <a href="#none"><div class="plus5_no3_right_div11" onclick="details.addCart(${str.goods_id})">加入购物车</div></a>
                <a href="#none" class="che"><div class="plus5_no3_right_div111">立即购买</div></a>
              </div>`;
                            
              xuan.innerHTML = html;
              console.log(xuan);

        });
        

    
    }
    // 加入购物车的静态方法
    static addCart(goodsId){
        console.log(goodsId);
       
        // 判断是否存在  不存在就是没有登录 ，调转页面
        let id = localStorage.getItem('user_id');  
         console.log(id);
        if(!id) location.href = './login.html';

        // 发送ajax ，将数据加入到购物车
        axios.post('http://localhost:8888/cart/add',{id,
    goodsId}).then(res=>{
        res = JSON.parse(res)
             console.log(res);
             if(res.code == 1){
                //   加入购物车成功后 弹出一个框 提示
                layer.open({
                    title: '商品加入'
                    ,content: '加入购物车成功'
                    ,btn: ['确定'] 
                    
                  });
                

             }
           if(res.code == 401) location.href = "./login.html";
        });

    }
    
    // 获取节点的方法
    $(ele){
        let res = document.querySelectorAll(ele);
        return  res.length == 1? res[0] : res;
    }
}
new details;